<template>
	<view class="cont">
		<view class="cont-body">
			<!--头部-->
			<view class="status_bar"></view>
			<view class="head flex-row">
				<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
				<view class="center">选择参会人员</view>
				<view class="right" @click="goComplete">完成</view>
			</view>
			
			<view class="department">
				<view class="department-list">
					<uni-collapse :accordion="true">
						<uni-collapse-item v-for="(list,i) in deptList" :key="i" :title="list.dept.fullname + '(' + list.dept.subnum +')'" :show-animation="true" @getMoreSubUser='getMoreSubUser("dept",list.dept.id,"", i)'>
							<view class="order-list">
								<view v-for="(item,index) in list.rows" :key="index" class="order-list-cell" @click="setManageSelect(item)">
									<view class="order-text">
										<text>{{item.name}}</text>
										<!-- <text class="uni-badge">主管理员</text> -->
									</view>
									<view class="order-choice">
										<image v-if="checkedIds.includes(item.id)" src="/static/icon_choose_pre.png" mode="aspectFill"></image>
										<image v-else src="/static/icon_choose_nor.png" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import API from '../../../common/api.js';
import uniIcons from '@/components/uni-icons/uni-icons.vue'
import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'

export default {
	components: {
		uniIcons,
		uniCollapse,
		uniCollapseItem
	},
	data: function () {
		return {
			company: uni.getStorageSync("company"),
			userid: uni.getStorageSync("userid"),
			deptid: uni.getStorageSync("deptid"),
			subDept: [],		// 子部门列表
			subUser: [],		// 部门人员
			deptList: [],		// 部门列表
			checkedIds: [],		// 已选择人员ID
			checkedNames: [],	// 已选择人员姓名
		}
	},
	onLoad:function(){
		this.checkedIds = uni.getStorageSync("checked_meeting_ids") || [];
		this.checkedNames = uni.getStorageSync("checked_meeting_names") || [];
		this.getSubDeptByDept();
	},
	methods:{
		// 获取部门列表
		getSubDeptByDept(){
			var that = this;
			
			uni.request({
				url:API.getSubDeptByDept+"?deptid="+this.deptid,
				method:"GET",
				header:API.get_head(),
				success: (res) => {
					if(res.data.success){
						var subDept = res.data.data.subDept;
						that.subDept  = subDept;
						that.subUser = res.data.data.subUser;
						
						that.deptList= [];
						for (var i = 0; i<subDept.length; i++ ) {
							var data = {
								dept: subDept[i],
								rows: []
							}
							that.deptList.push(data);
						}
					}
				},
				fail: () => {
					uni.showToast({
						title:"加载失败",
						icon:'none'
					})
				}
			});
		},
		// 获取部门所属员工
		getMoreSubUser(type,para,username,len){
			var that = this;
			uni.request({
				url:API.getMoreSubUser,
				data:{type, para, username},
				method:"POST",
				header:API.get_head(),
				success: (res) => {
					if(type == 'dept'){
						var rows = res.data.data.rows;
						that.deptList[len].rows = rows;
					}
					
					if(res.data.message != "success"){
						uni.showToast({
							title:res.data.message,
							icon:"none"
						});
					}
				},
				fail: () => {
					uni.showToast({
						title:"加载失败",
						icon:'none'
					})
				}
			});
		},
		// 点击人员
		setManageSelect(item){
			let { id, name } = item;
			if(this.checkedIds.includes(id)){
				this.checkedIds = this.checkedIds.filter(item=>item != id);
				this.checkedNames = this.checkedNames.filter(item=>item != name);
			}else{
				this.checkedIds.push(id);
				this.checkedNames.push(name);
			}
		},
		// 完成
		goComplete(){
			uni.setStorageSync('checked_meeting_ids', this.checkedIds);
			uni.setStorageSync('checked_meeting_names', this.checkedNames);
			uni.navigateBack();
		},
		// 返回
		goBack(){
			uni.navigateBack();
		}
	}
}
</script>

<style>
@import "../../../common/uni.css";

page{
	height: 100%;
	background-color: #FFFFFF;
}

.fixedHeader.cont-header{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
}
.cont-header .status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background:#FFFFFF;
}
.cont-header .title{
	height:98upx;
	text-align: center;
	font-size:28upx;
	line-height:98upx;
	color: #333333;
	font-weight: bold;
	position:relative;
}
.cont-header .title .right{color:#b5b5b5;font-size:30upx;position:absolute;right:20upx;top:0;}


.search{
	padding: 0 30upx 20upx;
	background-color: #FFFFFF;
}
.search-item{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #EAEDF2;
	border-radius: 60upx;
	height: 80upx;
	line-height: 80upx;
}
.search-icon{
	padding: 0 20upx;
	text-align: center;
	line-height: 80upx;
}
.search-item input{
	flex: 1;
	height: 80upx;
	line-height: 80upx;
}
.search-sub{
	color: #C5C5C5;
	margin-top: 30upx;
}
.department{
	padding: 20upx 0;
	background-color: #F2F2F2;
}
.department-list{
	padding-left: 20upx;
	background-color: #FFFFFF;
}
.department-list-cell,.order-list-cell{
	height: 100upx;
	line-height: 100upx;
	padding-right: 30upx;
	position: relative;
}
.department-list-cell:after{
	content: "";
	display: block;
	width: 100%;
	height: 2upx;
	background-color: #F9F9F9;
	position: absolute;
	left: 0;
	bottom: 0;
}
.department-list-cell text:first-child{
	color: #303030;
}
.department-list-cell text:nth-child(2){
	color: #C5C5C5;
	padding-left: 10upx;
}
.department-list-cell .icon-arrowright{
	float: right;
}

.department .uni-collapse-cell--open{
	background-color: #FFFFFF;
}
.department .uni-collapse-cell__title{
	padding-left: 0;
}

.invite{
	padding: 30upx 0;
	background-color: #e5e5e5;
}
.invite navigator{
	height: 80upx;
	line-height: 80upx;
	color: #303030;
	background-color: #FFFFFF;
}
.invite .icon-filled{
	margin: 0 50upx;
}

.order{
	padding-top: 20upx;
	background-color: #e5e5e5;
}
.order-list{
	background-color: #FFFFFF;
}
.order-list-cell{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0 5px 0 15px;
}
.order-list-cell:after{
	content: "";
	display: block;
	width: 100%;
	height: 2upx;
	background-color: #F9F9F9;
	position: absolute;
	left: 0;
	bottom: 0;
}
.order-list-cell:last-child:after{
	height: 0;
}
.order-list-cell .order-icon{
	width: 60upx;
	height: 60upx;
	line-height: 60upx;
	margin-top: 20upx;
	border-radius: 50%;
	text-align: center;
	color: #83868C;
	background-color: #CDE1F9;
	margin: 20upx 30upx;
	font-size: 18upx;
}
.order-list-cell.admin .order-icon{
	background-color: #3197F6;
	color: #FFFFFF;
}
.order-list-cell .order-text{
	flex: 1;
	line-height: 100upx;
	color: #303030;
}
.order-text .uni-badge{
	font-size: 18upx;
	border-radius: 50upx;
	border: 1px solid #74ABCA;
	color: #74ABCA;
	background-color: #FFFFFF;
	margin-left: 10upx;
}
.order-text image{
	width: 40upx;
	height: 40upx;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 30upx;
	margin: auto 0;
}

.order-choice{
	width: 40upx;
	height: 40upx;
	margin: 30upx 20upx 0 30upx;
}
.order-choice image{
	width: 100%;
	height: 100%;
}

.cont-tabBar{
	width: 100vw;
	height: 120upx;
	box-sizing: border-box;
	padding: 20upx 30upx;
	border-top: 1px solid #EDEDED;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10000;
	background-color: #FFFFFF;
}
.cont-tabBar-row{
	height: 80upx;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.cont-tabBar-item{
	width: 240upx;
	height: 80upx;
}
.cont-tabBar-item button{
	height: 100%;
	border-radius: 13upx;
	background-color: #3596FD;
}
.cont-tabBar-item button:active{
	background-color: #3596FD;
	opacity: 0.6;
}
</style>
